<template>
  <div class="container">
    <topTitle
      :titleText="titleText"
      :back="back"
      @gobackTriser="goBackList"
    ></topTitle>
    <div class="mainCon">
      <el-row :gutter="20" class="topBox">
        <el-col :span="18" style="padding-left: 0px">
          <div class="grid-content bg-purple">
            <div class="leftTBox">
              <div class="companyName">
                <span class="companyTit ellipsis">{{
                  detailData.projectName
                }}</span>
                <span
                  :class="[
                    startStatus,
                    {
                      greenBack: detailData.status === 'STARTED',
                      StartOver: detailData.status === 'COMPLETED',
                      startStop: detailData.status === 'STOPPED',
                      noStart: detailData.status === 'NOT_STARTED',
                    },
                  ]"
                  >{{ detailData.statusName }}</span
                >
              </div>
              <div class="rating">
                <p>
                  <span class="score">
                    <span>{{ detailData.score }}</span
                    >分 / 评级：
                    <span>{{ detailData.gradeLevel }}</span>
                  </span>
                  <span class="time fS color999">
                    <span>评价更新时间：</span>
                    <span>{{ detailData.upTime }}</span>
                  </span>
                </p>
              </div>
            </div>
            <div class="leftBBox">
              <el-divider content-position="left">
                项目存在
                <span style="color: #e02020">{{
                  detailData.negetivePointNums
                }}</span>
                项扣分
              </el-divider>
              <div class="noDeduction" v-if="negetivePoints.length < 1">
                <img src="../../../static/img/noData.png" alt />
                <div class="text fS color999">暂无扣分项</div>
              </div>
              <!-- 扣分项 -->
              <div v-if="negetivePoints.length > 0">
                <div
                  class="deduction"
                  v-for="(item, i) in negetivePoints"
                  :key="i"
                >
                  <p class="dedTitle fS color333">
                    <span>{{ item.name }}</span
                    >( <span>根据项目数据</span>，存在
                    <span>{{ item.count }}</span
                    >项扣分)
                  </p>
                  <div>
                    <ul>
                      <li
                        class="mrT12"
                        v-for="(itemChild, j) in item.indexes"
                        :key="j"
                      >
                        <div
                          class="clearfix"
                          @click="goRepair(i, j, itemChild.id)"
                          style="position: relative"
                        >
                          <i
                            class="icon iconfont iconzhankai"
                            style="
                              color: #e02020;
                              font-size: 12px;
                              position: absolute;
                              top: 8px;
                            "
                            v-if="isShowDetail !== i + '/' + j"
                          ></i>
                          <i
                            class="icon iconfont iconshouqi"
                            style="
                              color: #e02020;
                              font-size: 12px;
                              position: absolute;
                              top: 8px;
                            "
                            v-if="isShowDetail === i + '/' + j"
                          ></i>
                          <span
                            class="dedCon fS color333 ellipsis"
                            style="width: 60%; margin-left: 15px"
                            :title="itemChild.reason"
                            >{{ itemChild.reason }}</span
                          >
                          <el-button
                            size="small"
                            class="funBut fr"
                            v-if="isShowDetail !== i + '/' + j"
                            >修复</el-button
                          >
                          <el-button
                            size="small"
                            class="funBut fr"
                            v-if="isShowDetail === i + '/' + j"
                            >{{ isOpenText }}</el-button
                          >
                          <span
                            class="dedCon fr fS color333"
                            v-if="itemChild.judgeType == 'SCORE'"
                            >-{{ itemChild.score }}分</span
                          >
                          <span class="dedCon fr fS color333" v-else
                            >定级{{ itemChild.gradeLevel }}</span
                          >
                        </div>
                        <el-collapse-transition>
                          <div
                            class="rankDetail"
                            v-if="isShowDetail === i + '/' + j"
                          >
                            <div>
                              <div class="clearfix">
                                <p class="conTitle color333 fl">
                                  {{ specificData.indexName }}
                                </p>
                                <p
                                  class="fr pointsLevel"
                                  v-if="specificData.judgeType == 'LEVEL'"
                                >
                                  定级{{ specificData.gradeLevel }}
                                </p>
                                <p
                                  class="fr pointsLevel"
                                  v-if="specificData.judgeType == 'SCORE'"
                                >
                                  -{{ specificData.score }}分
                                </p>
                              </div>
                              <p class="labelWidth clearfix">
                                <span class="fS color666 fl">扣分原因：</span>
                                <span class="fS color666 fl w80">{{
                                  specificData.reason
                                }}</span>
                              </p>
                              <p class="labelWidth clearfix">
                                <span class="fS color666 fl">责任主体：</span>
                                <span class="fS color666 fl w80">
                                  <span class="type">{{
                                    specificData.companyType
                                  }}</span>
                                  {{ specificData.companyName }}
                                </span>
                              </p>
                              <p class="labelWidth clearfix">
                                <span class="fS color666 fl">评价标准：</span>
                                <span class="fS color666 fl w80">{{
                                  specificData.criterion
                                }}</span>
                              </p>
                            </div>
                            <div class="way">
                              <p class="fS color333 labelWidth">如何修复</p>
                              <!-- <p  class = "labelWidth clearfix"><span class = "fS color666 fl">修复平台：</span><span class = "fS fl w80" style = "color:#409EFF;">我是扣分原因</span></p>
                              <p  class = "labelWidth clearfix"><span class = "fS color666 fl">修复方式：</span><span class = "fS color666 fl w80">我是扣分原因</span></p>-->
                              <div
                                v-html="specificData.tips"
                                class="howRepair"
                              ></div>
                            </div>
                          </div>
                        </el-collapse-transition>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
            <!-- 加分项 -->
            <div class="leftBBox">
              <el-divider content-position="left">
                项目存在
                <span style="color: #5fab2c">{{
                  detailData.positivePointNums
                }}</span>
                项加分
              </el-divider>
              <div class="noDeduction" v-if="positivePoints.length < 1">
                <img src="../../../static/img/noData.png" alt />
                <div class="text fS color999">暂无加分项</div>
              </div>
              <div v-if="positivePoints.length > 0">
                <div
                  class="deduction"
                  v-for="(item, i) in positivePoints"
                  :key="i"
                >
                  <p class="dedTitle fS color333">
                    <span>{{ item.name }}</span
                    >( <span>根据项目数据</span>，存在
                    <span>{{ item.count }}</span
                    >项加分)
                  </p>
                  <div>
                    <ul>
                      <li
                        class="mrT12"
                        v-for="(itemChild, j) in item.indexes"
                        :key="j"
                      >
                        <div
                          class="clearfix"
                          @click="goBonusPointsDetail(i, j, itemChild.id)"
                          style="position: relative"
                        >
                          <i
                            class="icon iconfont iconzhankai"
                            style="
                              color: #5fab2c;
                              font-size: 12px;
                              position: absolute;
                              top: 8px;
                            "
                            v-if="isShowBonusPoints !== i + '/' + j"
                          ></i>
                          <i
                            class="icon iconfont iconshouqi"
                            style="
                              color: #5fab2c;
                              font-size: 12px;
                              position: absolute;
                              top: 8px;
                            "
                            v-if="isShowBonusPoints === i + '/' + j"
                          ></i>
                          <span
                            class="dedCon fS color333 ellipsis"
                            style="width: 60%; margin-left: 15px"
                            :title="itemChild.reason"
                            >{{ itemChild.reason }}</span
                          >
                          <el-button
                            size="small"
                            class="funBut fr"
                            v-if="isShowBonusPoints !== i + '/' + j"
                            >展开</el-button
                          >
                          <el-button
                            size="small"
                            class="funBut fr"
                            v-if="isShowBonusPoints === i + '/' + j"
                            >{{ isOpenBonusPoints }}</el-button
                          >
                          <span
                            class="dedCon fr fS color333"
                            v-if="itemChild.judgeType == 'SCORE'"
                            >+{{ itemChild.score }}分</span
                          >
                          <span class="dedCon fr fS color333" v-else
                            >定级{{ itemChild.gradeLevel }}</span
                          >
                        </div>
                        <el-collapse-transition>
                          <div
                            class="rankDetail"
                            v-if="isShowBonusPoints === i + '/' + j"
                          >
                            <div>
                              <div class="clearfix">
                                <p class="conTitle color333 fl">
                                  {{ specificData.indexName }}
                                </p>
                                <p
                                  class="fr"
                                  style="color: #5fab2c"
                                  v-if="specificData.judgeType == 'LEVEL'"
                                >
                                  定级{{ specificData.gradeLevel }}
                                </p>
                                <p
                                  class="fr"
                                  style="color: #5fab2c"
                                  v-if="specificData.judgeType == 'SCORE'"
                                >
                                  +{{ specificData.score }}分
                                </p>
                              </div>
                              <p class="labelWidth clearfix">
                                <span class="fS color666 fl">加分原因：</span>
                                <span class="fS color666 fl w80">{{
                                  specificData.reason
                                }}</span>
                              </p>
                              <p class="labelWidth clearfix">
                                <span class="fS color666 fl">责任主体：</span>
                                <span class="fS color666 fl w80">
                                  <span class="type">{{
                                    specificData.companyType
                                  }}</span>
                                  {{ specificData.companyName }}
                                </span>
                              </p>
                              <p class="labelWidth clearfix">
                                <span class="fS color666 fl">评价标准：</span>
                                <span class="fS color666 fl w80">{{
                                  specificData.criterion
                                }}</span>
                              </p>
                            </div>
                          </div>
                        </el-collapse-transition>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
            <div class="explainBox">
              项目评级划分：A、B、C、D；A为最高评级，D为最低评级； A：80~100分、
              B：60~80分、C：40~60分、D：0~40分；出现直接被定级为D的情况，对应评分为0分；项目初始分值均为100分；
            </div>
          </div>
        </el-col>
        <el-col :span="6" style="padding-right: 0">
          <!-- <div class="grid-content bg-purple">
            <div class="rightTBox">
              <p class="fS color666">{{detailData.city}}在建项目排名</p>
              <p class="ranking color333">
                <i v-if="isScore" class="iconfont iconpaiming"></i>
                <span>{{detailData.rank}}</span>/
                <span>{{detailData.total}}</span>
              </p>
            </div>
          </div> -->
          <div class="grid-content bg-purple">
            <div class="rightTBox">
              <div class="functionItem" @click="toProposal">
                <div class="onlineBtn">
                  在线执法<img src="/static/img/onlineLaw.png" alt="" />
                </div>
              </div>
              <div class="state" @click="punishmentVisible = true">
                动态惩戒说明
              </div>
            </div>
          </div>
          <div class="grid-content bg-purple">
            <div class="rightMBox">
              <h3 class="fS color666">{{ detailData.city }}在建项目排名</h3>
              <p class="ranking color333">
                <img src="/static/img/cup.png" alt="" />
                <span>{{ detailData.rank }}</span
                >/<span>{{ detailData.total }}</span>
              </p>
            </div>
          </div>
          <div class="grid-content bg-purple">
            <div class="rightBBox">
              <p class="basicSituation color333">基本情况</p>
              <p class="labelWidth clearfix">
                <span class="fS color333 fl">建档日期：</span>
                <span class="fS fr color333">{{
                  detailData.createTime || '--'
                }}</span>
              </p>
              <p class="labelWidth clearfix">
                <span class="fS color333 fl">开工日期：</span>
                <span class="fS fr color333">{{
                  detailData.startDate || '--'
                }}</span>
              </p>
              <p class="labelWidth clearfix">
                <span class="fS color333 fl">建设周期：</span>
                <span class="fS fr color333"
                  >{{ detailData.cycle || '--' }}天</span
                >
              </p>
              <p class="labelWidth clearfix">
                <span class="fS color333 fl">实名制总人数：</span>
                <span class="fS fr color333"
                  >{{ detailData.realNameTotal || 0 }}人</span
                >
              </p>
              <p class="labelWidth clearfix">
                <span class="fS color333 fl">考勤人次：</span>
                <span class="fS fr color333"
                  >{{ detailData.attTotal || 0 }}人次</span
                >
              </p>
              <p class="labelWidth clearfix">
                <span class="fS color333 fl">保证金总缴存：</span>
                <span class="fS fr color333">{{
                  detailData.depositAccount || '--'
                }}</span>
              </p>
              <p class="labelWidth clearfix">
                <span class="fS color333 fl">工资专户：</span>
                <span class="fS fr color333" style="color: #5fab2c">{{
                  detailData.salaryAccount || '--'
                }}</span>
              </p>
              <p class="labelWidth clearfix">
                <span class="fS color333 fl">代发工资总额：</span>
                <span class="fS fr color333"
                  >{{ detailData.saTotal || 0 }}万元</span
                >
              </p>
            </div>
          </div>

          <!--动态惩戒说明弹框-->
          <el-dialog
            title="动态惩戒说明"
            :visible.sync="punishmentVisible"
            width="40%"
            :close-on-click-modal="false"
          >
            <div class="punishContent">
              <div class="punishTitle">
                第十三条 劳动保障信用评价为A级的用人单位可以享受以下守信激励措施
              </div>
              （一）免除或者减少劳动保障检查频次；<br />
              （二）在评比表彰、奖励和认定类活动中，给予优先推荐；<br />
              （三）在金融活动中，优先给予信用贷款；符合贷款条件情况下在银行办理贷款，按市场利率下浮5%发放。<br />
              （四）法定代表人、负责人在职称评审时，给予优先；<br />
              （五）在办理人力资源社会保障行政许可、审批事项和相关业务过程中，享受绿色通道，实施“容缺受理”等便利服务，部分申报材料(法律法规要求提供的材料除外)不齐备的，如行政相对人书面承诺在规定期限内提供，可先行受理，加快办理进度，书面承诺履约情况记入信用记录；<br />
              （六）在政府采购、招标投标、行政审批、市场准入、资质审核等事项中使用信用评价时，其企业第三方信用评价结果予以加分；<br />
              （七）在评定和谐劳动关系单位时予以加分；<br />
              （八）在公共传播媒体上对守信典型进行宣传报道；<br />
              （九）优先安排人力资源社会保障方面的财政性资金；<br />
              （十）法律、法规、规章规定可以实施的其他激励措施。<br />
              <div class="punishTitle">
                第十四条
                劳动保障信用评价为C级的用人单位应当受到以下失信惩戒措施：
              </div>
              （一）信用告知。人力资源社会保障行政部门予以书面告知，详细记载被告知人的姓名、告知时间、告知方式等内容，并予以登记。<br />
              （二）诚信约谈。人力资源社会保障部门可对其主要负责人、分管负责人、直接责任人进行约谈。告知劳动保障法律法规和规章，督促其在经济社会活动中严格自律、诚信守法、履行社会责任，对其存在的失信行为，限期改正。<br />
              （三）对用人单位重点执法检查，并跟踪整改进度；<br />
              （四）对用人单位或其他负责人进行劳动保障法律法规和相关知识培训；<br />
              （五）暂缓和谐劳动关系单位的认定，已认定的和谐劳动关系单位暂时从公布名单中取消；<br />
              （六）银行机构对用人单位实施重点监控；<br />
              （七）法律、法规、规章规定可以实施的其他惩戒措施。<br />
              <div class="punishTitle">
                第十五条
                劳动保障信用评价为D级的用人单位应当受到以下失信惩戒措施：
              </div>
              （一）在金融活动中，融资授信时从严审核；<br />
              （二）不予评定和谐劳动关系单位；<br />
              （三）不予安排人力资源社会保障方面的财政性资金；<br />
              （四）取消被认定和谐劳动关系单位资格，并从诚信信用信息库中退出；<br />
              （五）撤销相关荣誉称号，3年内禁止参与评先评优活动；<br />
              （六）继续列为劳动保障执法重点监察对象；<br />
              （七）在政府采购、招标投标、行政审批、市场准入、资质审核等事项中使用信用评价时，其企业第三方信用评价结果予以减分；<br />
              （八）确认为失信社会法人黑名单并向社会公布；<br />
              （九）法律法规等规定可以实施的其他惩戒措施。
            </div>
          </el-dialog>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
export default {
  name: 'evaluationDetail',

  data() {
    return {
      isScore: true,
      titleText: '项目评价详情',
      startStatus: 'startStatus', //状态样式
      isShowDetail: '',
      isOpenText: '', //扣分
      isShowBonusPoints: '', //加分
      isOpenBonusPoints: '', //加分
      detailData: {},
      negetivePoints: [],
      positivePoints: [],
      specificData: '', //具体详情
      projectId: '',
      back: true,
      punishmentVisible: false,
    }
  },
  created() {
    this.projectId = this.$route.query.projectId
    this.getScoreData()
    //从其它页面过来默认选中项目评价
    this.$store.commit(
      'set_active_index',
      '/home/projectScore/projectEvaluationList'
    )
    this.$store.state.activeMenu = '/home/projectScore/projectEvaluationList'
    this.$store.commit('CHANGE_SLIDER_NAME', {
      oldUrl: '/home/projectScore/projectEvaluationList',
      newUrl: this.$router.currentRoute.fullPath,
    })
  },
  methods: {
    goBackList() {
      this.$router.push('/home/projectScore/projectEvaluationList')
      this.$store.commit('GOBACK_NAME', {
        oldUrl: '/home/projectScore/projectEvaluationList',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    // 扣分点击显示详情
    async goRepair(index, j, id) {
      await this.getDetailData(id)
      if (this.isShowDetail === index + '/' + j) {
        this.isShowDetail = -1 //在这里就将它赋值为-1  由于：-1 !=  index 所以其他内容隐藏 ，被点击的则打开
      } else {
        this.isShowDetail = index + '/' + j //这里是把index赋值给isShow，isShow=index则显示
        this.isOpenText = '收起'
        this.isShowBonusPoints = -1
      }
    },
    // 加分点击显示详情
    async goBonusPointsDetail(index, j, id) {
      await this.getDetailData(id)
      if (this.isShowBonusPoints === index + '/' + j) {
        this.isShowBonusPoints = -1 //在这里就将它赋值为-1  由于：-1 !=  index 所以其他内容隐藏 ，被点击的则打开
      } else {
        this.isShowBonusPoints = index + '/' + j //这里是把index赋值给isShow，isShow=index则显示
        this.isOpenBonusPoints = '收起'
        this.isShowDetail = -1
      }
    },
    getScoreData() {
      this.axios({
        method: 'post',
        url: 'api-ps/projectscoredetail/expand/scoredetail',
        data: { projectId: this.projectId },
      })
        .then((resp) => {
          if (!resp.data.hasError) {
            this.detailData = resp.data.result
            this.negetivePoints = this.detailData.negativePoint
            this.positivePoints = this.detailData.positivePoint
          } else {
            this.$message({
              type: 'error',
              message: resp.data.errorMsg,
            })
          }
        })
        .catch((error) => {
          this.$message({
            type: 'error',
            message: '数据获取失败',
          })
        })
    },
    getDetailData(id) {
      return this.axios({
        method: 'post',
        url: 'api-ps/projectscoredetail/expand/indexdetail',
        data: { id: id },
      })
        .then((resp) => {
          if (!resp.data.hasError) {
            this.specificData = resp.data.result
          } else {
            this.$message({
              type: 'error',
              message: resp.data.errorMsg,
            })
          }
        })
        .catch((error) => {})
    },
    toProposal() {
      this.$router.push({
        path: '/home/onlineLaw/addProposal',
        name: 'addProposal',
        query: { id: this.projectId },
      })
    },
  },
}
</script>

<style scoped lang="less">
/* .mainCon {
    top: 213px;
} */
.mainCon {
  /* padding-left: 24px; */
  background: #f5f7fa;
  /* padding-right: 24px; */
  height: calc(100% - 67px);
  overflow-y: auto;
  /* 开工状态 */
  .startStatus {
    padding: 2px 8px;
    color: #fff;
    font-size: 12px;
    margin-left: 10px;
    vertical-align: top;
    display: inline-block;
    margin-top: 8px;
  }
  .greenBack {
    background: #009588;
  }
  .StartOver {
    background: #657282;
  }
  .noStart {
    background: #ffc100;
  }
  .startStop {
    background: #d9544f;
  }
  .topBox {
    margin-left: 0 !important;
    margin-right: 0 !important;
    /* padding:25px;
      background: #fff; */
    /* 左边盒子样式 */
    .leftTBox {
      padding: 20px 25px;
      background: #fff;
      height: 122px;
      .companyName {
        color: #333333;
        font-size: 24px;
        .companyTit {
          display: inline-block;
          max-width: 600px;
        }
      }
      .rating {
        margin-top: 19px;
        .score {
          font-size: 24px;
          color: #333333;
        }
        .time {
          margin-left: 24px;
        }
      }
    }
    .leftBBox {
      background: #fff;
      padding: 10px 24px 24px;
      margin-top: 10px;
      /deep/.el-divider__text.is-left {
        left: 0;
      }
      /* /deep/.el-divider--horizontal {
        margin:0 0 ;
      } */
      /deep/.el-divider__text {
        padding: 0;
        padding-right: 12px;
        font-size: 16px;
        color: #333333;
      }
      .deduction {
        margin-top: 12px;
        > div {
          padding-left: 96px;
        }
        .dedTitle {
          margin-bottom: 6px;
        }
        .funBut {
          color: #009588;
          border-color: #009588;
          background: #fff;
          width: 96px;
          margin-left: 60px;
        }
        .dedCon {
          display: inline-block;
          margin-top: 5px;
        }
        .rankDetail {
          margin-top: 12px;
          background: #f5f7fa;
          padding: 22px 24px;
          .conTitle {
            font-size: 16px;
            margin-bottom: 20px;
          }
          .way {
            margin-top: 8px;
            /deep/.howRepair {
              /* font-size: 14px;
                  color: #666666; */
              /* p { */
              /* font-size: 14px;
                  color: #666666; */
              /* } */
              span {
                font-size: 14px !important;
                color: #666666 !important;
                font-family: 'Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Arial,sans-serif' !important;
              }
            }
          }
          .pointsLevel {
            color: #e02020;
          }
          .type {
            font-size: 12px;
            border: 1px solid #009588;
            padding: 0 2px;
            color: #009588;
            border-radius: 2px;
          }
        }
      }
      .noDeduction {
        text-align: center;
        margin-top: 48px;
        img {
          width: 160px;
          margin-bottom: 15px;
        }
      }
    }
    .explainBox {
      padding: 24px;
      background: #fff;
      margin-top: 10px;
      font-size: 14px;
      color: #999999;
    }
    .rightTBox {
      height: 122px;
      background: #fff;
      text-align: center;
      padding-top: 16px;
      margin-bottom: 10px;
      .ranking {
        font-size: 28px;
        margin-top: 10px;
      }
      .functionItem {
        height: 60px;
        line-height: 60px;
        font-size: 18px;
        cursor: pointer;
        color: #fff;
        text-align: center;
        background-color: rgba(0, 149, 136, 0.65);
        /*margin-top: 20px;*/
        margin: 0 24px;
        -webkit-border-radius: 8px;
        -o-border-radius: 8px;
        -moz-border-radius: 8px;
        border-radius: 8px;
        .onlineBtn {
          position: relative;
          display: inline-block;
          padding: 0 30px;
          img {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            -webkit-transform: translateY(-50%);
            left: -6px;
          }
        }
      }
      .state {
        margin-top: 10px;
        font-size: 14px;
        color: #409eff;
        cursor: pointer;
      }
    }
    .rightMBox {
      padding: 20px 0 18px 0;
      background: #fff;
      text-align: center;
      margin-bottom: 10px;
      .ranking {
        position: relative;
        display: inline-block;
        padding: 0 30px;
        margin-top: 8px;
        font-weight: bolder;
        font-size: 28px;
        letter-spacing: 2px;

        img {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          -webkit-transform: translateY(-50%);
          left: -14px;
        }
      }
    }
    .rightBBox {
      background: #fff;
      padding: 16px 27px;
      /* margin-top: 10px; */
      .basicSituation {
        font-size: 16px;
        padding-bottom: 15px;
        margin-bottom: 15px;
        border-bottom: 1px solid #d5dee7;
      }
    }
  }
  .mrT12 {
    margin-top: 12px;
  }
  .labelWidth {
    margin-bottom: 8px;
  }
  .fS {
    font-size: 14px;
  }
  .w80 {
    width: 80%;
  }
}
.iconpaiming {
  font-size: 34px;
  background-image: linear-gradient(to bottom, #fd9d00 0%, #fa6400 100%);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.punishContent {
  line-height: 21px;
  .punishTitle {
    margin: 10px 0;
    color: #000;
  }
}
</style>
